<!DOCTYPE html>
<html lang="zh-cn">
<head>
	
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>
高亮Markdown中的代码 | 
穷折腾</title>
	<link rel="stylesheet" href="/static/css/style.css" />
	<link rel="stylesheet" href="/static/css/pygments.css" />
	<link rel="alternate" type="application/rss+xml" title="RSS" href="http://zqqf16.info/rss.xml" />
</head>
<body>
    <div id="container">
      <div id="main" role="main">
        <header>
		<h1>
高亮Markdown中的代码
</h1>
		</header>

     <nav>
		<span><a title="home page" class="" href="/">home</a></span>
		<span><a title="标签" class="" href="/tags/index.html">标签</a></span>
		<span><a title="订阅" class="" href="/rss.xml">订阅</a></span>
        <span><a href="/pages/about.html" title="关于">关于</a></span>
     </nav>

     <article class="content">
        <section class="post">
            
		<p>Markdown语法标准中并没有一种方法来标明代码语言的种类。所以要想用Javascript来进行代码高亮的话就需要手动加一些类似于<code>&lt;code class="python"&gt;</code>的HTML标签，显得十分Ugly。</p>
<p>于是乎想从Server端入手，想到了Pygments这个神器。但问题又来了。。。</p>
<p>初步打算用</p>
<div class="codehilite"><pre>```python
print &#39;hello&#39;
```
</pre></div>


<p>这样的方式来指明代码种类。先把代码段用正则匹配出来，根据语言种类调用Pygments进行着色。然后再把其它部分连同着色后的的代码段一起Markdown转换。</p>
<p>后来越想越觉得不太靠谱，还是有点Ugly。</p>
<p>于是乎继续Google，终于发现了一个完美的方法，并对Markdown2刮目相看。</p>
<p>一直用Markdown2这个Python写的解释器来转换Markdown脚本，之前光看名字还觉得这玩意是个山寨货。今天研究发现，这货还挺好用。</p>
<p>Markdown2提供了一个代码高亮的扩展：<a href="https://github.com/trentm/python-markdown2/wiki/fenced-code-blocks">fenced code blocks</a>, 它能自动匹配这样的代码，并调用Pygments进行着色。</p>
<div class="codehilite"><pre>```python
print &quot;hi&quot;
```
</pre></div>


<p>使用方法也很简单：</p>
<div class="codehilite"><pre><span class="n">html</span> <span class="o">=</span> <span class="n">markdown2</span><span class="o">.</span><span class="n">markdown</span><span class="p">(</span><span class="s">&quot;some markdown&quot;</span><span class="p">,</span> <span class="o">...</span><span class="p">,</span> <span class="n">extras</span><span class="o">=</span><span class="p">[</span><span class="s">&quot;fenced-code-blocks&quot;</span><span class="p">])</span>
</pre></div>


<p>问题圆满解决~</p>
<p>更多Markdown2扩展请参考<a href="https://github.com/trentm/python-markdown2/wiki/Extras">Wiki</a></p>
	</section>
	<section class="meta">
		<span class="tags">Tagged by 
			<a href="/tags/python.html">python</a>
		</span>

		<span class="time">&nbsp;<time datetime="2013-04-26">2013-04-26</time></span>
	</section>
	<!-- Duoshuo Comment BEGIN -->
<div class="ds-thread"></div>
<script type="text/javascript">
	var duoshuoQuery = {short_name:"zqqf16"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = 'http://static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		|| document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
</script>
<!-- Duoshuo Comment END -->

<hr/>


        </section>
     </article>
	 <div id="copy">&copy; Powered by <a href="https://github.com/zqqf16/zqqf16.github.com" title="Peanut">Peanut</a> | Themed by <a href="http://lhzhang.com" title="sext ii">sext ii</a></div>
      </div>
    </div> <!--! end of #container -->
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
			(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
			})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-41282906-1', 'zqqf16.info');
	  ga('send', 'pageview');
	</script>
</body>
</html>
